<template>
    <el-row class="tac">
      <el-col :span="2">
        <el-menu
          active-text-color="#ffd04b"
          background-color="#545c64"
          class="el-menu-vertical-demo"
          default-active="/"
          text-color="#fff"
          router
          @select="handleSelect"
          @open="handleOpen"
          @close="handleClose"
        >
          <el-menu-item class="logo">
            <span>中兴商城</span>
          </el-menu-item>
          <el-menu-item index="/">
            <el-icon><HomeFilled /></el-icon>
            <span>概览</span>
          </el-menu-item>
          <el-menu-item index="/market">
            <el-icon><GoodsFilled /></el-icon>
            <span>销售</span>
          </el-menu-item>
          <el-menu-item index="/product">
            <el-icon><Briefcase /></el-icon>
            <span>商品</span>
          </el-menu-item>
          <el-menu-item index="/setting">
            <el-icon><setting /></el-icon>
            <span>设置</span>
          </el-menu-item>
          <div style="height:406px">
            
          </div>
          <el-menu-item index="/config">
            <el-icon><Operation /></el-icon>
            <span>配置</span>
          </el-menu-item>
        </el-menu>
      </el-col>
      <el-col :span="22">
        <router-view></router-view>
      </el-col>
    </el-row>
  </template>
  
  <script lang="ts" setup>
  import {
    Setting,
    HomeFilled,
    GoodsFilled,
    Briefcase,
    Operation,
  } from '@element-plus/icons-vue'
  const handleOpen = (key: string, keyPath: string[]) => {
  }
  const handleClose = (key: string, keyPath: string[]) => {
  }
  const handleSelect = (key:string,keyPath:string[]) =>{
    console.log(key, keyPath)
  }
  </script>
  <style scoped src="@/assets/css/index.css"></style>